<template>
  <div class="carousel" @mouseenter="stopAutoPlay" @mouseleave="startAutoPlay">
    <div
      class="carousel-container"
      :style="{ transform: `translateX(-${currentIndex * 100}%)` }"
    >
      <slot></slot>
    </div>

    <!-- 指示器 -->
    <div class="carousel-indicators">
      <span
        v-for="(_, index) in itemCount"
        :key="index"
        class="indicator"
        :class="{ active: currentIndex === index }"
        @click="setActive(index)"
      ></span>
    </div>

    <!-- 切换按钮 -->
    <button class="carousel-btn prev" @click="prev" v-if="showArrow">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path
          d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"
          fill="currentColor"
        ></path>
      </svg>
    </button>
    <button class="carousel-btn next" @click="next" v-if="showArrow">
      <svg viewBox="0 0 24 24" width="24" height="24">
        <path
          d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
          fill="currentColor"
        ></path>
      </svg>
    </button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, watch } from 'vue';

const props = defineProps({
  autoPlay: {
    type: Boolean,
    default: true
  },
  interval: {
    type: Number,
    default: 3000
  },
  showArrow: {
    type: Boolean,
    default: true
  },
  itemCount: {
    type: Number,
    required: true
  }
});

const currentIndex = ref(0);
let timer: NodeJS.Timeout | null = null;

// 切换到下一张
const next = () => {
  currentIndex.value = (currentIndex.value + 1) % props.itemCount;
};

// 切换到上一张
const prev = () => {
  currentIndex.value = (currentIndex.value - 1 + props.itemCount) % props.itemCount;
};

// 直接切换到指定索引
const setActive = (index: number) => {
  currentIndex.value = index;
};

// 开始自动播放
const startAutoPlay = () => {
  if (props.autoPlay && !timer) {
    timer = setInterval(next, props.interval);
  }
};

// 停止自动播放
const stopAutoPlay = () => {
  if (timer) {
    clearInterval(timer);
    timer = null;
  }
};

// 组件挂载时启动自动播放
onMounted(() => {
  startAutoPlay();
});

// 组件卸载时清理定时器
onUnmounted(() => {
  stopAutoPlay();
});

// 监听 itemCount 变化，确保 currentIndex 不会超出范围
watch(() => props.itemCount, (newCount) => {
  if (currentIndex.value >= newCount) {
    currentIndex.value = 0;
  }
});
</script>

<style scoped lang="less">
.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;

  &-container {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.5s ease;
  }

  &-indicators {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 2;

    .indicator {
      width: 24px;
      height: 2px;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;

      &.active {
        background: #fff;
      }

      &:hover {
        background: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0;
    z-index: 2;

    &.prev {
      left: 16px;
    }

    &.next {
      right: 16px;
    }

    &:hover {
      background: rgba(0, 0, 0, 0.4);
    }
  }

  &:hover {
    .carousel-btn {
      opacity: 1;
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .carousel {
    &-btn {
      width: 32px;
      height: 32px;

      svg {
        width: 20px;
        height: 20px;
      }
    }

    &-indicators {
      bottom: 12px;

      .indicator {
        width: 20px;
      }
    }
  }
}
</style>
